<template>
  <div>

    <div class="block">
      <span class="demonstration">请选择时间</span>
      <el-date-picker
          v-model="value2"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
          @change="changeShijian"
          value-format="yyyy-MM-dd"
      >
      </el-date-picker>
    </div>
    <br>
    <div  style="width: 800px;height: 500px" class="righttop" ref="charts" id="main"></div>

  </div>
</template>

<script>
export default {
  name:"income",
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: '',
      starTime: '',
      endTime: '',
      time:[],
      price:[]
    }
  },
  mounted () {
    this.moren();
    this.mycharts()
  },
  methods: {
    mycharts(){
      var myChart = this.$echarts.init(document.getElementById('main'));

      myChart.setOption({
            title: {
              text: '销售量'
            },
            tooltip: {},
            legend: {
              data:['销量']
            },
            xAxis: {
              data: this.time
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: this.price
            }]
          })

      //让图表自适应
      window.addEventListener("resize",function(){
        myChart.resize()  // myChart 是实例对象
      })
    },
    changeShijian(){
      var that=this;
      //console.log(this.value2[0])
      //console.log(this.value2[1])
      this.$http.get(`/statistics/income/getAllOrder/${this.value2[0]}/${this.value2[1]}`).then(function (res){
        //console.log(res)
        that.time = res.data.data.time;
        that.price = res.data.data.sumPrice;
        that.mycharts();
      })
    },
    moren(){
      var that=this;
      this.$http.get(`/statistics/income/selectAllOrder`).then(function (res){
        console.log(res)
        that.time = res.data.data.time;
        that.price = res.data.data.sumPrice;
        that.mycharts();
      })
    }
  }

}
</script>

<style scoped>

</style>